<template>
  <div>
    <div @click="showModal" :class="disabled ? 'select-input disabled-select' : 'select-input'">
      <template v-if="selectedList.length > 0">
        <template v-for="(item, index) in selectedList">
          <SelectedUserItem v-if="index < maxCount" :info="item" @unSelect="unSelect" query />
        </template>
      </template>
      <span v-else
        style="height: 30px; line-height: 30px; display: inline-block; margin-left: 7px; color: #bfbfbf">请选择</span>
      <div v-if="ellipsisInfo.status" class="user-selected-item">
        <div class="user-select-ellipsis">
          <span style="color: red">+{{ ellipsisInfo.count }}...</span>
        </div>
      </div>
    </div>
    <RoleSelectModal :appId="currentAppId" :multi="multi" :getContainer="getContainer" title="选择组织角色"
      @register="registerRoleModal" @selected="onSelected" />
  </div>
</template>

<script lang="ts">
import { useModal } from '/@/components/Modal';
import { defHttp } from '/@/utils/http/axios';
import { computed, ref, watch, watchEffect, defineComponent } from 'vue';
import RoleSelectModal from './RoleSelectModal.vue';
import SelectedUserItem from '../userSelect/SelectedUserItem.vue';
import { Form } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';

const maxCount = 2;

export default defineComponent({
  name: 'RoleSelectInput',
  components: {
    RoleSelectModal,
    SelectedUserItem,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    store: {
      type: String,
      default: 'id',
    },
    value: {
      type: String,
      default: '',
    },
    multi: {
      type: Boolean,
      default: false,
    },
    getContainer: {
      type: Function,
      default: null,
    },
    appId: {
      type: String,
      default: '',
    },
  },
  emits: ['update:value', 'change'],
  setup(props, { emit }) {
    const formItemContext = Form.useInjectFormItemContext();
    const selectedList = ref<any[]>([]);
    const loading = ref(true);

    const [registerRoleModal, { openModal: openRoleModal, closeModal: closeRoleModal }] = useModal();
    function showModal(e) {
      e.preventDefault();
      e.stopPropagation();
      let list = selectedList.value.map((item) => item.id);
      openRoleModal(true, {
        list,
      });
    }

    const ellipsisInfo = computed(() => {
      let max = maxCount;
      let len = selectedList.value.length;
      if (len > max) {
        return { status: true, count: len - max };
      } else {
        return { status: false };
      }
    });

    function unSelect(id) {
      console.log('unSelectUser', id);
      loading.value = false;
      let arr = selectedList.value;
      let index = -1;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
          index = i;
          break;
        }
      }
      if (index >= 0) {
        arr.splice(index, 1);
        selectedList.value = arr;
        onSelectedChange();
      }
    }

    function onSelectedChange() {
      let temp: any[] = [];
      let arr = selectedList.value;
      if (arr && arr.length > 0) {
        temp = arr.map((k) => {
          return k[props.store];
        });
      }
      let str = temp.join(',');
      emit('update:value', str);
      emit('change', str);
      formItemContext.onFieldChange();
      console.log('选中数据', str);
    }

    function onSelected(_v, values) {
      console.log('角色选择完毕：', values);
      loading.value = false;
      if (values && values.length > 0) {
        selectedList.value = values;
      } else {
        selectedList.value = [];
      }
      onSelectedChange();
      closeRoleModal();
    }

    // 目前仅用于数据重新加载的一个状态
    const currentAppId = ref('');
    watchEffect(() => {
      let appId = props.appId;
      if (appId) {
        currentAppId.value = appId;
      } else {
        currentAppId.value = new Date().getTime();
      }
    });

    watch(
      () => props.value,
      async (val) => {
        if (val) {
          if (loading.value === true) {
            await getRoleList(val);
          }
        } else {
          selectedList.value = [];
        }
        loading.value = true;
      },
      { immediate: true }
    );

    /**
     * 获取角色列表
     * @param ids
     */
    async function getRoleList(ids) {
      const url = '/sys/role/queryall';
      let params = {
        [props.store]: ids,
        pageSize: 200
      };
      // 特殊条件处理（因为后台实体是roleCode，所以折中一下，不能直接改，会出问题）
      if (props.store === 'code') {
        params.roleCode = ids;
      }
      selectedList.value = [];
      const data = await defHttp.get({ url, params }, { isTransformResponse: false });
      console.log('getRoleList>>', data);
      if (data.success) {
        const { records } = data.result;
        let arr: any[] = [];
        if (records && records.length > 0) {
          for (let item of records) {
            arr.push({
              id: item.id,
              name: item.name || item.roleName,
              code: item.roleCode,
              checked: true,
              selectType: 'sys_role',
            });
          }
        }
        selectedList.value = arr;
      } else {
        console.error(data.message);
      }
    }

    return {
      selectedList,
      ellipsisInfo,
      maxCount,
      registerRoleModal,
      closeRoleModal,
      showModal,
      onSelected,
      unSelect,
      currentAppId,
    };
  },
});
</script>

<style scoped lang="less">
.select-input {
  padding: 0 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  color: #9e9e9e;
  font-size: 14px;
  flex-wrap: nowrap;
  min-height: 32px;
  overflow-x: hidden;

  &.disabled-select {
    cursor: not-allowed;
    background-color: #f5f5f5 !important;
  }
}</style>
